<template>
  <div id="line-chart"></div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onDeactivated,
  onUnmounted,
  markRaw,
  watch,
} from "vue";
import * as echarts from "echarts";
let myChart = ref(null);
let props = defineProps(["lineColor"]);

let initChart = () => {
  const option = {
    backgroundColor: "#061021",
    tooltip: {
      trigger: "axis",
      axisPointer: {},
    },
    grid: {
      containLabel: true,
      bottom: "3%",
      top: "25%",
      left: "2%",
      right: "5%",
    },
    // 工具箱组件  可以另存为图片等功能
    //   toolbox: {
    //     right: "40",
    //     top: "0",
    //     fontSize: "99",
    //     show: true,
    //     itemSize: 18, //工具栏 icon 的大小。
    //     itemGap: 18,
    //     feature: {
    //       mark: { show: true },
    //       dataView: {
    //         show: true,
    //         readOnly: true,
    //         lang: ["数据试图", "关闭", "刷新"],
    //         //   textareaLineHeight: "0px",
    //         buttonColor: "#32c5d2",
    //         textColor: "red",
    //       },
    //       magicType: {
    //         show: true,
    //         type: ["line", "bar", "stack", "tiled"],
    //       },
    //       restore: { show: true },
    //       saveAsImage: { show: true },
    //     },
    //   },

    xAxis: {
      // triggerEvent: true,
      boundaryGap: false, //x 与左边的距离
      data: ["2023-11-28", "2023-12-28", "2024-01-28", "2024-02-28"],
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 16,
        color: "#fff",
        margin: 34,
      },

      axisTick: {
        show: false,
      },

      axisLine: {
        show: false,
      },
      splitArea: {
        // show: true,
        color: "red",
        //   lineStyle: {
        //     lineStyle: {
        //       color: "#434343", // 坐标轴线线的颜色
        //       width: "15", // 坐标轴线线宽
        //       type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        //       fontSize: "59",
        //     },
        //   },
      },
    },
    yAxis: [
      {
        name: "(单位：kW.h)",
        type: "value",
        nameTextStyle: {
          padding: [0, 0, 15, 85],
          color: "#fff",
          fontSize: "20",
          fontWeigth: "bolder",
          lineHeight: "30",
        },
        splitNumber: 3,
        axisLabel: {
          show: true,
          fontSize: 20,
          fontWeigth: "400",
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: "dased",
            color: "#002b69", //中间线的颜色
            opacity: ".3",
          },
        },
      },
    ],
    series: [
      {
        type: "line",
        silent: false,
        smooth: true,
        symbol: "none", // 不显示连接点
        itemStyle: {
          normal: {
            color: "#157DD7",
            lineStyle: {
              //线的颜色
              color: "#176FF9",
              width: 2,
            },
            areaStyle: {
              //type: 'default',
              //旧版渐变色实现
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
              //    //三种由深及浅的颜色
              //    [{
              //       offset: 0,
              //       color: 'rgba(1, 180, 255, 0.2)'
              //    }, {
              //       offset: 1,
              //       color: 'rgba(1, 180, 255, 0.1)'
              //    }])

              //新版渐变色实现
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                //湿度折线图这个颜色  (2,80,249)
                colorStops: [
                  {
                    offset: 0,
                    color: "#157DD7",
                  },
                  {
                    offset: 1,
                    color: "#061021",
                  },
                ],
              },
            },
          },
        },
        barWidth: 20,
        data: [200, 108, 200, 40, 210, 130],
      },
    ],
  };
  myChart?.value?.setOption(option);
};
onMounted(() => {
  myChart.value = markRaw(echarts.init(document.getElementById("line-chart")));
  initChart();
  window.addEventListener("resize", resize);
});
watch();
const resize = () => {
  myChart.value.resize();
};
onUnmounted(() => {
  removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
#line-chart {
  width: 100%;
  height: 35vh;
}
</style>
